<template>
	<div class="login-container">
		<div class="login-box">
			<h3 class="title"><i class="titlei"></i>医贝科技后台管理系统</h3>
			<p class="titlep">用科技创新为人类的医疗健康服务</p>
			<el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left" label-width="0px" class="card-box login-form">
				<el-form-item prop="username">
					<i class="useri"></i>
					<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="账户"></el-input>
				</el-form-item>
				<el-form-item prop="oldPassword">
					<i class="pswi"></i>
					<!-- <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="密码"></el-input> -->
					<el-input name="oldPassword" :type="pwdType" v-model="loginForm.oldPassword" autoComplete="on" placeholder="密码" onpaste="return false"></el-input>
					<img :src="imgSrc" style="position: absolute;right: 0;top: 11px;" @click="changeType()" alt="" />
				</el-form-item>
				<el-form-item prop="formControl" class="formControl-box">
					<el-row :gutter="20">
						<el-col :span="14">
							<i class="yzmi"></i>
							<el-input class="yzminp" name="formControl" @keyup.enter.native="handleLogin" v-model="loginForm.formControl" placeholder="验证码">
							</el-input>
						</el-col>
						<el-col :span="10" class="login-captcha">
							<img :src="identifyCode" @click="getCaptcha()" alt="">
						</el-col>
					</el-row>
					<!--<el-input name="formControl" type="text" v-model="loginForm.formControl" autoComplete="on" placeholder="请输入验证码（不区分大小写）"></el-input>
        <div class="formControl-img"><img src="/api/captcha/getCaptchaCode"/></div>-->
				</el-form-item>
				<el-form-item class="btnbx">
					<el-button class="loginbtn" type="primary" :loading="loading" @click.native.prevent="handleLogin">
						登录
					</el-button>
				</el-form-item>
			</el-form>

			<el-dialog title="第三方验证" :visible.sync="showDialog">
				邮箱登录成功,请选择第三方验证
				<social-sign></social-sign>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import { formcontrol } from 'api/login';
	import socialSign from './socialsignin';
	import md5 from 'js-md5';
	import crypto from 'crypto';
	import CryptoJS from 'crypto-js'
	export default {
		components: {
			socialSign
		},
		name: 'login',
		data() {
			/*const validatePass = (rule, value, callback) => {
			  if (value.length < 5||value.length > 25) {
			    callback(new Error('长度在 5 到 25 个字符'));
			  } else {
			    callback();
			  }
			};*/
			const validateVerifycode = (rule, value, callback) => {
				if(value === '') {
					callback(new Error('请输入验证码'))
				} else {
					callback()
				}
			}
			return {
				loginForm: {
					username: undefined,
					password: undefined,
					oldPassword: undefined,
					formControl: undefined
				},
				pwdType: "password",
				imgSrc: require("../../assets/login_images/open_eyes.png"),
				identifyCode: '',
				loginRules: {
					username: [{
							required: true,
							message: '账户不能为空',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 25,
							message: '长度在 3 到 25 个字符',
							trigger: 'blur'
						}
					],
					oldPassword: [{
							required: true,
							message: '密码不能为空',
							trigger: 'blur'
						}/*,
						{
							min: 1,
							max: 25,
							message: '长度在 16 个字符内',
							trigger: 'blur'
						}*/
					],
					formControl: [{
						required: true,
						trigger: 'blur',
						validator: validateVerifycode
					}]
				},
				loading: false,
				showDialog: false
			}
		},
		methods: {
			changeType() {
				this.pwdType = this.pwdType === 'password' ? 'text' : 'password';
				this.imgSrc = this.imgSrc === require("../../assets/login_images/colse_eyes.png") ? require("../../assets/login_images/open_eyes.png") : require("../../assets/login_images/colse_eyes.png");
			},
			handleLogin() {
				console.log(this.loginForm)
				if(!this.loginForm.username) {
					this.$message({
						message: '请输入账号',
						duration: '2000',
						type: 'warning'
					})
					return false
				} else if(!this.loginForm.oldPassword) {
					this.$message({
						message: '请输入密码',
						duration: '2000',
						type: 'warning'
					})
					return false
				} else if(!this.loginForm.formControl) {
					this.$message({
						message: '请输入验证码',
						duration: '2000',
						type: 'warning'
					})
					return false
				}
				var md5 = crypto.createHash("md5");
				md5.update(this.loginForm.oldPassword);
				this.loginForm.password= md5.digest('hex');
//				alert(this.loginForm.password);
//				var data = "888888";
//				var srcs = CryptoJS.enc.Utf8.parse(data);
				/*var key = CryptoJS.enc.Utf8.parse('abcdefgabcdefg12');
				var srcs = CryptoJS.enc.Utf8.parse(this.loginForm.oldPassword);
				var encrypted = CryptoJS.AES.encrypt(srcs, key, {
					mode: CryptoJS.mode.ECB,
					padding: CryptoJS.pad.Pkcs7
				});*/
//				this.loginForm.password = encrypted.toString();
//				alert(this.loginForm.password);
				this.$refs.loginForm.validate(valid => {
					if(valid) {
						//this.loading = true;
						this.$store.dispatch('LoginByEmail', this.loginForm).then((response) => {
							this.loading = false;
							this.$router.push({
								path: '/'
							});
							// this.showDialog = true;
						}).catch(() => {
							this.loading = false;
							this.getCaptcha();
						});

						// this.$http.post('/oauth/token', {
						//   username: this.loginForm.username,
						//   password: this.loginForm.password
						// }, {
						//   headers: {
						//     Authorization: 'Basic enV1bDp6dXVs'
						//   },
						//   emulateJSON: true,
						//   emulateHTTP: true
						// }).then(function(response) {
						//   if (response.status === 200) {
						//     this.$store.dispatch('LoginByEmail', this.loginForm).then(() => {
						//       this.loading = false;
						//       this.$router.push({
						//         path: '/'
						//       });
						//       // this.showDialog = true;
						//     }).catch(() => {
						//       this.loading = false;
						//     });
						//   } else {
						//     this.loading = false;
						//     return false;
						//   }
						// }, function(error) {
						//   console.log('server error!!');
						//   this.loading = false;
						//   return false;
						// });
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			afterQRScan() {
				// const hash = window.location.hash.slice(1);
				// const hashObj = getQueryObject(hash);
				// const originUrl = window.location.origin;
				// history.replaceState({}, '', originUrl);
				// const codeMap = {
				//   wechat: 'code',
				//   tencent: 'code'
				// };
				// const codeName = hashObj[codeMap[this.auth_type]];
				// if (!codeName) {
				//   alert('第三方登录失败');
				// } else {
				//   this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
				//     this.$router.push({ path: '/' });
				//   });
				// }
			},
			// 获取验证码
			getCaptcha() {
				this.listLoading = true;
				formcontrol()
					.then(response => {
						//						console.log(response);
						this.identifyCode = "data:image/png;base64," + response.stringPicture;
						this.listLoading = false;
					})
				//	    this.identifyCode = "";
			}
		},
		created() {
			this.getCaptcha()
			// window.addEventListener('hashchange', this.afterQRScan);
		},
		destroyed() {
			// window.removeEventListener('hashchange', this.afterQRScan);
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss">
	@import "src/styles/mixin.scss";
	.tips {
		font-size: 14px;
		color: #fff;
		margin-bottom: 5px;
	}
	
	.login-container {
		@include relative;
		height: 100vh;
		width: 100%;
		background: url('../../assets/login_images/hone_background.jpg') no-repeat 0 0;
		input:-webkit-autofill {
			// box-shadow: 0 0 0 1000px #293444 inset !important;
			// -webkit-text-fill-color: #fff !important;
			-webkit-box-shadow: 0 0 0 50px white inset;
			/* Change the color to your own background color */
			-webkit-text-fill-color: #666;
		}
		input {
			background: transparent;
			border: 0;
			-webkit-appearance: none;
			border-radius: 0;
			padding: 12px 5px 12px 15px;
			color: #454545;
			height: 47px;
		}
		.el-input {
			display: inline-block;
			height: 47px;
			width: 85%;
		}
		.yzminp {
			width: 73%;
		}
		.useri {
			width: 28px;
			height: 30px;
			background: url('../../assets/login_images/hone_account.png') no-repeat 0 0;
			vertical-align: middle;
			display: inline-block;
			margin-right: 8px;
			margin-left: 8px;
		}
		.pswi {
			width: 28px;
			height: 29px;
			background: url('../../assets/login_images/hone_password.png') no-repeat 0 0;
			vertical-align: middle;
			display: inline-block;
			margin-right: 8px;
			margin-left: 8px;
		}
		.yzmi {
			width: 28px;
			height: 29px;
			background: url('../../assets/login_images/hone_validation.png') no-repeat 0 0;
			vertical-align: middle;
			display: inline-block;
			margin-right: 8px;
			margin-left: 8px;
		}
		.svg-container {
			padding: 6px 5px 6px 15px;
			color: #889aa4;
		}
		.title {
			font-size: 34px;
			font-weight: 400;
			color: #333;
			text-align: center;
			margin-bottom: 5px;
			.titlei {
				height: 43px;
				width: 30px;
				background: url('../../assets/login_images/logo.png') no-repeat 0 0;
				vertical-align: middle;
				display: inline-block;
				margin-right: 15px;
			}
		}
		.titlep {
			font-size: 14px;
			text-align: center;
			color: #b1b1b1;
			margin-top: 0px;
			margin-bottom: 0px;
		}
		.login-box {
			position: absolute;
			left: 0;
			right: 0;
			margin: 120px auto;
			width: 600px;
			background-color: #fff;
			box-shadow: 0px 0px 27px 2px rgba(24, 39, 145, 0.5);
			border-radius: 14px;
		}
		.login-form {
			width: 400px;
			padding: 80px 35px 15px;
			margin: 0px auto;
		}
		.login-captcha {
			height: 47px;
			overflow: hidden;
			text-align: right;
			>img {
				width: 85%;
				height: 109%;
				cursor: pointer;
			}
		}
		.el-form-item {
			border-bottom: 2px solid #eeeeee;
			color: #454545;
		}
		.forget-pwd {
			color: #fff;
		}
		.btnbx {
			border-bottom: none;
			margin-top: 46px;
			margin-bottom: 30px;
			.el-form-item__content {
				text-align: center;
				.loginbtn {
					width: 250px;
					height: 56px;
					border-radius: 28px;
					font-size: 22px;
				}
			}
		}
	}
	/*.formControl-box{
		.el-form-item__content{
		  display: flex;
		  flex: 1;
		  justify-content: space-between;
		  
		  .el-input {
        width: 80%;
    	}
		}
}
.formControl-img{
	height: 47px;
	
	img{
		width: 100%;
		height: 100%;
	}
}*/
</style>